<template>
  <div class="dashboard-container">
    <el-row :gutter="10" class="mt-1">
      <el-col
        :xs="12"
        :sm="6"
        :lg="index == 2 ? 4 : 5"
        v-for="(item, index) in cardData"
        :key="index"
      >
        <el-card shadow="never">
          <div class="flex items-center justify-between mt-2">
            <span class="box-icon" :class="['box-icon-' + (index + 1)]">
              <box-icon
                size="20px"
                :name="
                  index == 0
                    ? 'id-card'
                    : index == 1
                      ? 'buildings'
                      : index == 2
                        ? 'store-alt'
                        : index == 3
                          ? 'book-open'
                          : 'store-alt'
                "
                class="mt-[4px]"
                :color="
                  index == 0
                    ? '#0ab39c'
                    : index == 1
                      ? '#299cdb'
                      : index == 2
                        ? '#f7b84b'
                        : index == 3
                          ? '#405189'
                          : '#0ab39c'
                "
              />
            </span>
            <div class="text-right text-[24px]">
              {{ Math.round(item.count) }}{{ index == 4 ? "处" : "人次" }}
            </div>
          </div>

          <div
            class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]"
          >
            <span class="text-[18px]"> {{ item.dataDesc }} </span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- Echarts 图表 -->
    <el-row :gutter="10" class="mt-3">
      <el-col :span="12" class="mb-2">
        <el-row>
          <el-col :span="12" style="position: relative">
            <component
              :is="chartComponent('zhfx1')"
              id="zhfx1"
              :height="echartHeight"
              width="100%"
              :echart-data="byxjjdData"
            />
            <div class="pie-title">本月巡检进度</div>
          </el-col>
          <el-col :span="12" style="position: relative">
            <component
              :is="chartComponent('zhfx2')"
              id="zhfx2"
              :height="echartHeight"
              width="100%"
              :echart-data="byxjxlData"
            />
            <div class="pie-title">本月巡检线路分析</div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12" class="mb-2">
        <component
          v-if="byxjfxData.xData.length"
          :is="chartComponent('byxjfx')"
          id="byxjfx"
          :height="echartHeight"
          :byxjfx-data="byxjfxData"
          width="100%"
        />
      </el-col>
      <el-col :span="12" class="mb-2">
        <component
          :is="chartComponent('yhdqfb')"
          id="yhdqfb"
          :height="echartHeight"
          width="100%"
        />
      </el-col>
      <el-col :span="12" class="mb-2">
        <component
          :is="chartComponent('jhsjxjfx')"
          id="jhsjxjfx"
          :height="echartHeight"
          width="100%"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import moment from "moment";
import type { EpPropMergeType } from "element-plus/es/utils/vue/props/types";
defineOptions({
  name: "Dashboard",
  inheritAttrs: false,
});
import DashboardAPI from "@/api/DashboardAPI";
const echartHeight = ref("200px");

const cardData = ref([
  {
    count: 0,
    dataDesc: "本月计划巡检",
    iconClass: "visit",
  },
  {
    count: 0,
    dataDesc: "本月完成巡检",
    iconClass: "ip",
  },
  {
    count: 0,
    dataDesc: "今日已完成巡检",
    iconClass: "money",
  },
  {
    count: 0,
    dataDesc: "今日未完成巡检",
    iconClass: "order",
  },
  {
    count: 0,
    dataDesc: "今日巡检隐患",
    iconClass: "order",
  },
]);
const byxjfxData = ref({
  jh: [],
  wc: [],
  xData: [],
});

const byxjxlData = ref([]);

const byxjjdData = ref([]);
// 首页报表
function f_Init1() {
  DashboardAPI.api_task_count().then(({ data, succeeded }) => {
    if (succeeded) {
      cardData.value[0].count = data.inspTaskCount.monthTotal;
      cardData.value[1].count = data.inspTaskCount.monthCompleteTotal;
      cardData.value[2].count = data.inspTaskCount.todayCompleteTotal;
      cardData.value[3].count = data.inspTaskCount.todayTodoTotal;
      cardData.value[4].count = data.inspTaskCount.todayDangerTotal;

      byxjjdData.value = [
        {
          name: "已完成",
          value: data.inspTaskCount.monthCompleteTotal,
        },
        {
          name: "未完成",
          value:
            data.inspTaskCount.monthTotal -
            data.inspTaskCount.monthCompleteTotal,
        },
      ];

      data.inspDestTaskMonth.forEach((item) => {
        byxjxlData.value.push({
          value: item.total,
          name: item.inspDestName,
        });
      });

      byxjxlData.value = byxjxlData.value.slice(0, 5);
    }
  });
}

// 本月巡检次数
function f_Init3() {
  const params = {
    StartTime: moment(new Date()).format("yyyy-MM-01 00:00:00"),
    EndTime: moment(new Date()).format("yyyy-MM-30 23:59:59"),
  };
  DashboardAPI.api_insp_daily(params).then(({ data, succeeded }) => {
    if (succeeded) {
      data.forEach((item) => {
        byxjfxData.value.jh.push(item.planTotal);
        byxjfxData.value.wc.push(item.completeTotal);
        byxjfxData.value.xData.push(item.x);
      });

      console.log(byxjfxData.value);
    }
  });
}

// 图表数据
const chartData = ref(["zhfx", "yhdqfb", "byxjfx", "jhsjxjfx"]);
const chartComponent = (item: string) => {
  return defineAsyncComponent(() => import(`./components/${item}.vue`));
};

onMounted(() => {
  f_Init1();
  f_Init3();
});
</script>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;
  padding: 0 6px;

  .el-card {
    border: none;
    box-shadow: rgb(56 65 74 / 5%) 0 1px 4px 2px !important;
  }

  .user-avatar {
    width: 40px;
    height: 40px;
    // border-radius: 50%;
  }

  .pie-title {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    text-align: center;
  }

  .data-box {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    font-weight: bold;
    color: var(--el-text-color-regular);
    background: var(--el-bg-color-overlay);
    border-color: var(--el-border-color);
    box-shadow: var(--el-box-shadow-dark);
  }

  .svg-icon {
    fill: currentcolor !important;
  }

  .box-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 4px;
  }

  .box-icon-1 {
    background-color: #daf4f0;
  }

  .box-icon-2 {
    background-color: #dff0fa;
  }

  .box-icon-3 {
    background-color: #fef4e4;
  }

  .box-icon-4 {
    background-color: #e2e5ed;
  }

  .box-icon-5 {
    background-color: #daf4f0;
  }
}
</style>
